<!DOCTYPE html>
<html>
  <head>
    <meta name = "viewport" content = "width = device-width"/>
    <title>{$title}</title>
    <link rel=stylesheet type=text/css href="../Public/Css/base.css">
	<style type="text/css">
	body {
	background-image:url(../Public/Images/bg/{$bgImage}); 
	background-repeat:no-repeat;
	background-size:100%;
	padding:3%
	}
	</style>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->  
	<!-- 载入全局变量 authorWords -->
	{$authorWords}
    <script src="../Public/Js/wordsNav.js"></script>
	<script type="text/javascript">
	function load() {
            var h = document.documentElement.clientHeight;
            var myWords = document.getElementById('main');
            main.style.height = h/2+"px";
        }
	</script>
  </head>
  
  <body onload = "load()">
    <div id="main">
    <p id="words" style="color:white;font-size:24px;overflow:auto;">
    {$firstWords}
    </p>
    <p style="text-align:right;color:white;font-size:16px">
    {$authorName}
    </p>
    </div>
    <table width=100% style="margin-top:20%">
      <tr>
      <td>
        <img src="../Public/Images/nav/previous.png" onclick="gotoPrevious()">
      </td>
      <td>
        <img src="../Public/Images/nav/play.png" onclick="playAudio()">
      </td>
      <td>
        <img src="../Public/Images/nav/next.png" onclick="gotoNext()">
      </td>
      </tr>
    </table>
  </body>

</html>